<template>
  <div>
    <input v-focus>
    <p v-console="msg">test test</p>
    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
    <p v-pin:direction="200">hahahha</p>
  </div>
</template>

<script>
  export default {
    name: "Instrucation",
    data() {
      return {
        msg: 123,
        message: 'hello!'
      }
    },
    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      },
      console: {
        bind: function (el, binding, vnode) {
          console.log(JSON.stringify(binding.value) + '................')
        }
      },
      demo: {
        bind: function (el, binding, vnode) {
          var s = JSON.stringify
          el.innerHTML =
            'name: ' + s(binding.name) + '<br>' +
            'value: ' + s(binding.value) + '<br>' +
            'expression: ' + s(binding.expression) + '<br>' +
            'argument: ' + s(binding.arg) + '<br>' +
            'modifiers: ' + s(binding.modifiers) + '<br>' +
            'vnode keys: ' + Object.keys(vnode).join(', ')
        }
      }
    }
  }
</script>

<style scoped>

</style>
